<template>
  <div class="login-container">
        <div class="main-box">
        <el-form>
              <div class="title-tips">谷歌口令注册</div>
        </el-form>
        <el-form  class="login-form" :model="ruleForm" status-icon :rules="rules" ref="ruleForm" style="width: 350px;margin-left: 64%">
        <div :class="{ on: !loginWay }">
            <el-form-item>
              <el-input :prefix-icon="Avatar" style="width: 300px; height: 40px; margin-top: -5px; margin-bottom: -4px;" v-model="ruleForm.username" placeholder="请输入邮箱前缀"></el-input>
              <el-button style="display: inline-block; margin-right: 40px; margin-top: 200px; width: 130px;" color="#722ed1" @click.prevent="submitForm()">提交</el-button>
              <el-button style="display: inline-block; margin-right: -250px; margin-top: 200px; width: 130px;" color="#722ed1" @click.prevent="gologin()">返回</el-button>
            </el-form-item>
        </div>
        <div :class="{ on: loginWay }">
          <el-form-item>
            <el-image style="margin-left: 20px; margin-top: -20px" :src="qrCodeUrl" class="captcha"></el-image>
            <el-button style="position: relative; right: -55px; margin-top: 10px; width: 200px;" color="#722ed1" @click.prevent="gologin()">已扫描返回登录</el-button>
          </el-form-item>
       </div>
      </el-form>
      </div>
  </div>
</template>

<script>
import { Avatar, Lock , Phone} from "@element-plus/icons-vue";
/* eslint-disable */
export default {
  data () {
    var checkUserName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入账号'))
      } else {
        callback()
      }
    }
    return {
      loginWay: true,
      Avatar,
      Lock,
      Phone,
      ruleForm: {
        username: '',
      },
      qrCodeUrl:'',
      rules: {
        username: [
          { validator: checkUserName, trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    async submitForm() {
      const data = {
        username: this.ruleForm.username,
      }
      if (this.qrCodeUrl) {
        URL.revokeObjectURL(this.qrCodeUrl) // 回收URL
      }
      await this.$http.post('/Google_Registration_Checkup/', data,{responseType: 'blob'})
          .then(response => {
            this.loginWay = false
            const blob = new Blob([response.data], {type: 'image/png'}) // 将二进制流转换为Blob对象
            this.qrCodeUrl = URL.createObjectURL(blob) // 使用URL.createObjectURL()将Blob对象转换为URL
          })
          .catch(error => {
            URL.revokeObjectURL(this.qrCodeUrl) // 回收URL
            console.error(error);
          });
    },
    gologin() {
      this.$router.push('/ge_phonelogin');
    },
  }
}
</script>
<style scoped>
body{
  margin: 0 auto;
}
.on {
  display: none;
}
.login-container {
  /*font-weight: bold; !* 加粗字体 *!*/
  position: relative; /* 设置为相对定位 */
  z-index: 9999;
  width: 100%;
  height: 100%;
  background: url('../../assets/login_images/background.jpg') center center fixed
  no-repeat;
  background-size: cover;

}
.main-box {
  position: fixed;
  top: 50%;
  right: 14%;
  transform: translateY(-50%);
  width: 420px;
  min-width: 100px;
  min-height: 100px;
  height: 520px;
  padding: -40px;
  background-color: white;
  border: 1px solid rgba(221, 221, 221, 0.5); /* 设置边框颜色并添加透明度 */
  box-shadow: 0 3px 8px rgba(221, 221, 221, 0.2); /* 更改阴影颜色并添加透明度 */
  border-radius: 20px; /* 增加圆角 */
  overflow: hidden;
}
.title-tips {
  font-weight: bold; /* 加粗字体 */
  position: absolute;
  top: calc(15%); /* 向上移动 60px */
  right: calc(33%); /* 向右移动 60px */
  font-size: 25px; /* 缩小字体大小 */
  color: #333; /* 更改字体颜色 */
  text-overflow: ellipsis;
  white-space: nowrap;
}
.login-form {
  position: absolute;
  max-width: 100%;
  top: 35%; /* 将元素垂直居中 */
  left: -50%; /* 将元素水平居中 */
}
/* 普通状态 */
.login_header_title a {
  color: #999; /* 默认灰色 */
}

/* 激活状态 */
.login_header_title a.active {
  color: #000; /* 变更为黑色 */
  /*font-weight: bold; !* 加粗字体 *!*/
  font-size: 18px; /* 放大字体 */
}
p {
  color: #ddd; /* 将元素颜色设置为浅色 */
  text-indent: 97px;
  position: relative; /* 设置相对定位 */
  font-size: 10px; /* 放大字体 */
}
p:before {
  left: 0;
  margin-left: 18px; /* 负值等于文本的缩进长度 */
}

p:after {
  right: 0;
  margin-right: 22px; /* 负值等于文本的缩进长度 */
}
</style>
